<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
<form class="form-horizontal" id="columnPropertyForm">
<div id="columnProperty">
	<div class="form-group">
		<div class="col-xs-3 col-sm-3" id="multiselectDiv">
			<select id="tableColumn" class="multiselect" multiple="multiple">
				<c:forEach var="col" items="${columns}">
					<option value="${col.sqlName}" title="${col.remarks}">${col.sqlName}</option>
				</c:forEach>
			</select>
		</div>
		<div class="col-xs-3 col-sm-1">
			<h3 class="header blue lighter smaller tooltipDesc" id="colName" title="数据库中定义的字段">
				<i class="ace-icon fa fa-info smaller-90"></i>
				字段
			</h3>
		</div>
		<div class="col-xs-3 col-sm-1">
			<h3 class="header blue lighter smaller tooltipDesc" id="showName" title="页面上显示的名称，不填则显示字段名">
				<i class="ace-icon fa fa-info smaller-90"></i>
				显示名
			</h3>
		</div>
		<div class="col-xs-3 col-sm-2">
			<h3 class="header blue lighter smaller tooltipDesc" id="formTypeDesc" title="表单中显示的类型，如input,textarea等，默认为input。详见FormType.java">
				<i class="ace-icon fa fa-info smaller-90"></i>
				FormType
			</h3>
		</div>
		<div class="col-xs-3 col-sm-2">
			<h3 class="header blue lighter smaller tooltipDesc" id="validateTypeDesc" title="表单验证规则，使用jquery validate,详见ValidateType.java">
				<i class="ace-icon fa fa-info smaller-90"></i>
				ValidateType
			</h3>
		</div>
		<div class="col-xs-3 col-sm-3">
			<h3 class="header blue lighter smaller tooltipDesc" id="tagDesc" title="自定义标签选择，详见macro.ftl和Tag.java">
				<i class="ace-icon fa fa-info smaller-90"></i>
				Tag
			</h3>
		</div>
	</div>
</div>
</form>
<div class="form-group hide" id="columnPropertyTemplate">
		<div class="col-xs-3 col-sm-3">
			
		</div>
		<div class="col-xs-3 col-sm-1">
			<label for="table-select" class="col-xs-12 col-sm-12 control-label no-padding-right"></label>
		</div>
		<div class="col-xs-3 col-sm-1">
			<input type="text"  name="showName" class="col-xs-12"/>
		</div>
		<div class="col-xs-3 col-sm-2">
			<select name="formType">
			<c:forEach items="${formTypes}" var="type">
				<c:choose>
					<c:when test="${type == 'INPUT'}">
						<option value="${type}" title="${type}" selected>${type}</option>
					</c:when>
					<c:otherwise>
						<option value="${type}" title="${type}">${type}</option>
					</c:otherwise>
				</c:choose>
			</c:forEach>
			</select>
		</div>
		<div class="col-xs-3 col-sm-2">
			<select name="validateType">
				<option value="" title=""></option>
				<c:forEach items="${validateTypes}" var="type">
					<option value="${type}" title="${type}">${type}</option>
				</c:forEach>
			</select>
		</div>
		<div class="col-xs-3 col-sm-3">
			<select name="tagType" onchange="selectTagType(this)">
				<option value="" title=""></option>
				<c:forEach items="${tagTypes}" var="type">
					<option value="${type}" title="${type}">${type}</option>
				</c:forEach>
			</select>
			<select name="dictType" class="hide" required>
				<option value=""></option>
			</select>
		</div>
		
	</div>
<script type="text/javascript">
var scripts = [null, null];
var data = [
            {label: "ACNP", value: "ACNP"},
            {label: "test", value: "test"}
        ];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	$('#tableColumn').multiselect({
	 enableFiltering: true,
	 buttonClass: 'btn btn-white btn-primary',
	 buttonWidth:'300px',
	 nonSelectedText:'未选择',
	 filterPlaceholder: '查询',
	 allSelectedText:'所有选中',
	 templates: {
		button: '<button type="button" class="multiselect dropdown-toggle"  id="multiselectButton"></button>',
		ul: '<ul class="multiselect-container dropdown-menu"></ul>',
		filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
		filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
		li: '<li><a href="javascript:void(0);"><label></label></a></li>',
		divider: '<li class="multiselect-item divider"></li>',
		liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
	 },
	 onChange:function(info,flag){
		 if(flag == true){
			var $template = $("#columnPropertyTemplate").clone();
			$template.removeClass("hide").attr("id",info[0].innerHTML);
			$template.find("label").html(info[0].innerHTML);
			$template.find("label").parent().append('<input type="hidden"  name="columnName" value="'+info[0].innerHTML+'"/>');
			$("#columnProperty").append($template);
		 }else if(flag == false){
			 $("#"+info[0].innerHTML).remove();
		 }
	 }
	});
	
	$("#multiselectButton").on("click",function(){
		//debugger;
		var divClass = $(this).parent().attr("class");
		var index = divClass.indexOf("open");
		if(index != -1){
			$(this).parent().attr("class","btn-group");
		}else{
			divClass = divClass + " " + "open";
			$(this).parent().attr("class",divClass);
		}
	});
	
	
	$(".tooltipDesc").tooltip({
		show: {
			effect: "slideDown",
			delay: 250
		}
	});
	
});


function selectTagType(obj){
	if(obj.value == "dictOptions" || obj.value == "dictName"){
		$(obj).next().empty();
		$.post("${ctx}/dict/dictTypeJson.do",{},function(result){
			$(result).each(function(){
				var dictType = $(this)[0].dictType;
				var dictDesc = $(this)[0].dictDesc;
				$(obj).next().append("<option value="+dictType+" title="+dictDesc+">"+dictType+"---"+dictDesc+"</option>");
			});
		});
		$(obj).next().removeClass("hide");
	}else{
		$(obj).next().empty();
		$(obj).next().append('<option value=""></option>');
		$(obj).next().attr("class","hide");
	}
}

</script>